<template>
  <div>
    <!-- 购物袋顶部 -->
    <div class="shopbag_top_label_bar">
      <van-nav-bar
        title="购物袋"
      >
      <!-- 使用插槽, 在编辑删除没有数据时 控制他不显示 -->
        <template #right>
          <div v-if="shopbagData.length > 0 " @click="edit">{{ isEdit ? "完成" : "编辑" }}</div>
        </template>
      </van-nav-bar>
    </div>

    <!-- 购物袋广告位 -->
    <div class="shopbag_bg_img">
      <img src="../assets/images/shopbag_bg.png" alt="" />
    </div>

    <!-- 购物袋商品列表位 -->
    <div class="shopbag_content_box">
      <div class="shopbag_content">
        <div class="shopbag_item" v-for="item in shopbagData" :key="item.sid">
          <ProList
            isSlide
            :proData="item"
            @simpleSelect="getSimpleSelectStatus"
            @remove="removeOne(item.sid)"
          >

          <!-- 进步 器 -->
            <van-stepper
              @change="changeCount(item)"
              v-model="item.count"
              theme="round"
              button-size="19"
              disable-input
            />
          </ProList>
        </div>

        <van-empty
            v-if="shopbagData.length <= 0"
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="购物车空空如也,快去逛一逛! "
          />
      </div>
    </div>


    <!-- 购物袋全选提交栏 -->
    <div v-if="shopbagData.length > 0" class="shopbag_submit">
      <!-- 不是编辑状态 -->
      <van-submit-bar v-show="!isEdit" :price="total" button-text="提交订单" @submit="submitOrder">
        <van-checkbox @click="allSelect" v-model="Allchecked"
          >全选</van-checkbox
        >
      </van-submit-bar>
      <!--  编辑状态 -->
      <van-submit-bar
        v-show="isEdit"
        button-text="删除商品"
        @submit="removeSelect"
      >
        <van-checkbox @click="allSelect" v-model="Allchecked"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import ProList from "../components/ProList";
export default {
  name: "Shopbag",
  data() {
    return {
      // 控制进入器值
      value: "",
      // 控制全选值
      Allchecked: "",
      // 控制是否处于编辑状态的值
      isEdit: false,
      // 通过接口成功获取到res.data.code === 5000 的数据
      shopbagData: [],
      // 订单总价
      total:0
    };
  },
  created() {
    // 初始化调用获取用户购物袋的商品数据
    this.getShopbagData();
  },
  methods: {
    // 控制是否处于编辑状态的方法
    edit() {
      this.isEdit = !this.isEdit;
    },

    // 获取用户购物袋的商品数据
    getShopbagData() {
       let tokenString =  localStorage.getItem("TOKEN");
      // let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "get",
        url: "/findAllShopcart",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          // 
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
            
            return;
          }
          if (res.data.code === 5000) {
            // 
            // 添加一个单选状态的属性
            res.data.result.forEach((v) => {
              // 笔记: 在vue中 需要先添加属性在赋值属性,
              v.checked = false;
            });
            this.shopbagData = res.data.result;
          }
        })
        .catch((err) => {
          
        });
    },

    // 全选
    allSelect() {
      // 遍历购物袋的数据并且都给他们的状态与全选状态相同
      this.shopbagData.forEach((v) => {
        // 
        v.checked = this.Allchecked;
      });
    },

    //获取单选状态
    getSimpleSelectStatus() {
      this.sum()
      // 使用循环是为了宣布单选为true时, 全选也跟着为true
      for (let i = 0; i < this.shopbagData.length; i++) {
        if (!this.shopbagData[i].checked) {
          this.Allchecked = false;
          return;
        }
      }
      this.Allchecked = true;
    },

    // 修改数量
    changeCount(item) {
      // item购物车商品
      // 
      // 需要修改就需要token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");


      this.axios({
        method: "POST",
        url: "/modifyShopcartCount",
        data: {
          tokenString,
          sid: item.sid,
          count: item.count,
        },
      }).then((res) => {
        // 
        if (res.data.code == 700) {
          this.$toast("您需要登录");
          setTimeout(() => {
            this.$$router.push({ name: "Login" });
          }, 1000);
          return
        }
          this.sum()
      });
    },

    // 删除商品的公共方法(单个删除和多个删除)
    removeShopbagData(sids) {
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");


      // 获取删除商品的接口
      this.axios({
        method: "POST",
        url: "/deleteShopcart",
        data: {
          tokenString,
          sids,
        },
      }).then((res) => {
        // 判断用户是否登录
        if (res.data.code == 700) {
          this.$toast("请登录");
          setTimeout(() => {
            this.$router.push({ name: "Login" });
          }, 2000);
          return;
        }
        // 提示从接口中删除情况  成功或者失败
        this.$toast(res.data.msg);

        // 从页面中删除
        if (res.data.code === 7000) {
          
          let sidsData = JSON.parse(sids);

          // 循环shopbagData数据, 使用indexof判断sidsData数据在不在shopbagData里面
          for (let i = 0; i < this.shopbagData.length; i++) {
            let sid = this.shopbagData[i].sid;
            if (sidsData.indexOf(sid) > -1) {
              this.shopbagData.splice(i, 1);
              // i++ 的作用
              i--;
              // 此处老师的代码为 i--; 但会进入死循环, 但不用则无法将商品从页面中删除  所以调用 this.getShopbagData(); 重新渲染商品
              // 因为此处调用了方法 所以后面的全选细节无法处理.
              // this.getShopbagData();
            }
          }

          // 当其他都选中, 就一个没选, 刚好需要删除那个没选中的, 删除后就成了全部选中状态  需要处理全选按钮的状态
          this.getSimpleSelectStatus();
          // 计算总金额
            this.sum()
        }
      });
    },

    // 单个删除
    removeOne(sid) {
      // 应为数据接口要求sids需要  其中 sids 值为 JSON.stringify([sid1, sid2, sid3])  的方式传入  所以进行处理
      let sids = JSON.stringify([sid]);

      // 调用删除商品的方法
      this.removeShopbagData(sids);

    
    },

    // 选择删除
    removeSelect() {
      // 获取勾选的商品
      let sids = [];
      // 遍历this.shopbagData  判断是否为选中状态  是则push进sids空数组里面
      this.shopbagData.forEach((v) => {
        if (v.checked) {
          sids.push(v.sid);
        }
      });

      // 判断sids数组是否有需要删除的商品 如果没有, 则提醒客户选择需要删除的商品 并且拦截 不再往下
      if (sids.length == 0) {
        this.$toast("请选择需要删除的商品");
        return;
      }
      // 应为数据接口要求sids需要  其中 sids 值为 JSON.stringify([sid1, sid2, sid3])  的方式传入  所以进行处理
      sids = JSON.stringify(sids);
      // 调用删除方法并将sids传入
      this.removeShopbagData(sids);
      this.Allchecked = false;
    },

    // 计算订单的总金额
    sum(){
      let total = 0;
      this.shopbagData.forEach(v =>{
        if(v.checked){
          total += v.count * v.price;
        }
      })
      this.total = total * 100
    },

    // 点击提交订单
    submitOrder(){
      // 获取提交的商品
      let sids = [];
      this.shopbagData.forEach(v => {
        if(v.checked){
          sids.push(v.sid);
        }
      })
      if(sids.length === 0){
        this.$toast("你没有选择商品哦")
        return
      }
      this.$router.push({name:"ConfirmOrder", query:{sids:sids.join('-')}})
    }
  },
  components: {
    ProList,
  },
};
</script>

<style lang="less" scoped>
// 购物袋顶部
/deep/ .van-nav-bar__right .van-nav-bar__text {
  color: #333;
}

// 购物袋广告位
.shopbag_bg_img {
  width: 100%;
  height: 60px;
  img {
    width: 100%;
    height: 100%;
  }
}

//购物袋商品列表
.shopbag_content_box {
  position: fixed;
  top: 106px;
  right: 0;
  left: 0;
  bottom: 100px;
  // background: #999;
  overflow-y: auto;
}

// 底部提交位置
.van-submit-bar {
  position: fixed;
  width: 100%;
  bottom: 50px;
  // margin-bottom: 50px;
  // background: forestgreen;
  /deep/.van-submit-bar__button--danger {
    background: blue;
  }

  /deep/ .van-checkbox {
    margin-right: auto;
  }
}
</style>